<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<script>
			$("#div1").ready(function() {
				$("#d1btn1").click(function() {
					alert($(".d1_1").scrollLeft() + " px");
				});
				$("#d1btn2").click(function() {
					alert($(".d1_2").scrollTop() + " px");
				});
			});

			$("#div3").ready(function() {
				$("div").find("#" + $.escapeSelector("#target")).css('color', 'red');

			});
		</script>
		<style>
			#div1,
			#div3 {
				width: 500px;
				border: solid 1px blue
			}
			
			#div3 {
				height: 200px;
			}
			
			#div1 {
				height: 600px;
			}
		</style>
	</head>

	<body>
		<div id="div1">
			<div class="d1_1" style="border:1px solid black;width:100px;height:130px;overflow:auto">
				The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
			</div><br>
			<button id="d1btn1">返回水平滚动条的位置</button>
			<p>向右移动滚动条,再次单击该按钮。</p>
			<div class="d1_2" style="border:1px solid black;width:100px;height:150px;overflow:auto">
				This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div><br>
			<button id="d1btn2">返回垂直滚动条的位置</button>
			<p>向下移动滚动条,再次单击该按钮。</p>
		</div>
		<br>

		<div id="div3">
			<p id='#target'>一些文本</p>
			<span id='target'>一些文本</span>
		</div>

	</body>

</html>